<template>
  <div class="about">
    <h1>This is an about page</h1>
    <proxy-input
      placeholder="231"
      v-model="txt"
      suffix-icon="el-icon-date"
      @valueChange="changetxt"
      @input="inp"
    >
      <template #inpBefore>
        <p>前插槽</p>
      </template>
      <template #inpAfter>
        <p>后插槽</p>
      </template>

      <el-button slot="append" icon="el-icon-search"></el-button>
      <template #prepend>http://</template>
      <i slot="suffix" class="el-input__icon el-icon-date"></i>
      <template slot="append">.com</template>
    </proxy-input>
    <br />
    <br />
    <br />
    <p>{{ txt }}</p>
  </div>
</template>

<script>
import proxyInput from "@/components/proxyInput.vue";
export default {
  name: "AboutView",
  components: {
    proxyInput,
  },
  data() {
    return {
      txt: "洪金宝",
    };
  },
  methods: {
    changetxt(e) {
      console.log(e);
    },
    inp(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss" scoped>
.about {
  width: 700px;
}
</style>
